// todo  登录注册表单切换
// 获取去注册的按钮元素
$("#showReg").on("click", function () {
    // 显示注册表单
    $(".reg-form").show();
    // 隐藏登录表单
    $(".login-form").hide();
});
// 获取去登录的按钮元素
$("#showLogin").on("click", function () {
    $(".login-form").show();
    $(".reg-form").hide();
});

// 使用form.verify方法进行表单校验  处理 form 元素
const form = layui.form;
//  todo 自定义验证规则

form.verify({
    //我们既支持上述函数式的方式，也支持下述数组的形式
    //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]

    // 对密码进行校验
    pwd: [/^[\S]{6,12}$/, "密码必须6到12位，且不能出现空格"],

    // 对确认密码进行校验
    repwd: function (value, item) {
        // console.log(value,item);
        // 1.获取密码框的内容
        let passwordValue = $("#reg-password").val();
        // 2.对两次密码进行比较
        if (value !== passwordValue) {
            return "两次密码输入不一致";
        }
    },
});

let layer = layui.layer;
// ==================== ajax请求实现注册功能 ====================
//  axios
//  步骤
//  1. 注册表单注册submit事件
//  2. 阻止表单的默认行为
//  3. 收集表单数据
//  4. axios 发请求

// 1.注册表单注册submit事件
$(".reg-form").on("submit", function (e) {
    // 2.阻止表单的默认行为
    e.preventDefault();

    // 3. 收集表单数据
    //    ? jQ有 serialize 方法收集表单数据
    //    ! 注意表单每一项需要加name属性
    //    ! name属性值 照着接口文档去书写
    const data = $(this).serialize();
    // console.log(data)
    // 4.axios 发请求

    axios.post("/api/reguser", data).then(({ data: { status, message } }) => {
        console.log(data);
        if (status !== 0) {
            // if 成立，说明注册失败
            // return alert(message)
            return layer.msg(message);
        }
        // 注册成功
        // alert(`恭喜你，${message}`)
        layer.msg(`恭喜你，${message}`);
        // 切换到登录界面
        $("#showLogin").click();
    });
});

// ==================== ajax请求实现登录功能 ====================

//  axios
//  步骤
//  1. 登录表单  submint 事件
//  2. 阻止表单的默认行为
//  3. 收集表单数据
//  4. axios 发请求
// 1.
$(".login-form").on("submit", function (e) {
    // 2.
    e.preventDefault();
    // 3. 收集表单数据
    //    ? jQ有 serialize 方法收集表单数据
    //    ! 注意表单每一项需要加name属性
    //    ! name属性值 照着接口文档去书写
    const data = $(this).serialize();
    // console.log(data)
    // 4.
    axios
        .post("/api/login", data)
        .then(({ data: { status, message, token } }) => {
            if (status !== 0) {
                // 登录失败
                // console.log("shi");
                return layer.msg(message);
            }

            // // 登录成功
            // // 提示
            // // console.log("cheng");
            // layer.msg(message);

            // // 跳转到后台主页
            // location.href = "/index.html";

            // 把 token 令牌给本地存储
            localStorage.setItem("token", token);

            //  优化代码
            layer.msg(
                message,
                {
                    icon: 1,
                    time: 2000, //2秒关闭（如果不配置，默认是3秒）
                },
                function () {
                    //do something
                    // 跳转到后台主页
                    location.href = "/index.html";
                }
            );
        });
});
